<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/会飞的小鸟.css">
	<script src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function(){
		var aa=$(".c1");
		var bb=aa.offset();
		var speed=20;
		var aaSize={width:aa.width(),height:aa.height()};
		$(document).keydown(function(even){
			var key=even.keyCode;
			switch(key){
				case 37:bb.left-=speed;//向左移动
					if(bb.left<=-aaSize.width){
						bb.left=$(window).width();
					}
					break;
				case 38:bb.top-=speed;//向上移动
					if(bb.top<=-aaSize.height){
						bb.top=$(window).height();
					};
					break;
				case 39:bb.left+=speed;//向右移动
					if(bb.left>=$(window).width()){
						bb.left=0;
					}
					break;
				case 40:bb.top+=speed;//向下移动
					if(bb.top>=$(window).height()){
						bb.top=0;
					}
					break;
			};
			aa.offset(bb);
		})
		
	});
	</script>
</head>
<body>
	<div class="c1">移动</div>
</body>
</html>